<template>
  <div class="position-container" style="overflow-x: auto">
    <table class="info-table">
      <thead>
        <tr>
          <th>序号</th>
          <th>工单编号</th>
          <th>状态</th>
          <th>应急抢险作业人员参与巡查处置</th>
          <th>特种车辆</th>
          <th>载人车辆</th>
          <th>排涝设备</th>
          <th>抽排能力</th>
          <th>负责班组</th>
          <th>班组组长</th>
          <th>组长联系电话</th>
          <th>到场时间</th>
          <th>办结时间</th>
          <th>创建时间</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in tableData" :key="index">
          <td>{{ index + 1 }}</td>
          <td>{{ item.fxdwmc }}</td>
          <td>{{ item.fxdwbh }}</td>
          <td>{{ item.ssjd }}</td>
          <td>{{ item.dwlx }}</td>
          <td>{{ item.ssyw }}</td>
          <td>{{ item.dz }}</td>
          <td>{{ item.glhl }}</td>
          <td>{{ item.zrdw }}</td>
          <td>{{ item.zrdwjb }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from "vue";
const tableData = ref([
  {
    fxdwmc: "新桥街道石梯沟支路新",
    fxdwbh: "50010600106004000405",
    dwlx: "下穿道",
  },
  {
    fxdwmc: "新桥街道石梯沟支路新",
    fxdwbh: "50010600106004000405",
    dwlx: "下穿道",
  },
]);
</script>

<style lang="less" scoped>
.info-table {
  width: 100%;
  border-collapse: collapse;
  th,
  td {
    border: 1px solid #797979;
    padding: 8px;
    text-align: center;
    background: #fff;
    max-width: 180px; /* 设置单元格的最大宽度 */
    white-space: nowrap; /* 防止文本换行 */
    overflow: hidden; /* 隐藏超出部分 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */
  }

  th {
    // background: #f5f5f5;
    font-weight: normal;
    color: #000;
    background: #e6e6e6;
  }

  td {
    color: #000;
  }
}
</style>
